<template>
  <view class="container">
    <view class="att-psl" v-for="item in personTest" :key="item.person_id">
      <view class="att-psl-item">
        <image class="att-avt" :src="defaultImg" mode=""></image>
        <view class="info-box">
          <view class="pslbasic">
            <view class="psl-name">{{item.person_name}}</view>
            <view class="psl-pay">{{item.person_pay}}</view>
          </view>
          <view class="psl-skill"><text class="skill-txt" v-for="(obj,index) in item.person_skill" :key="index">{{obj}}</text></view>
          <view class="psl-other"><text class="other-txt" v-for="(test,index) in item.person_other" :key="index">{{test}}</text></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name:"att-personnel",
    data() {
      return {
        defaultImg:'https://img2.baidu.com/it/u=1807443568,704507401&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=500',
        personTest:[
          {
            person_id:0,
            person_name:'张丽丽',
            person_img:'',
            person_pay:'8000/26天',
            person_skill:['二星育婴师','六年经验','会打LOL'],
            person_other:['湖南长沙','41岁','服务99户','好评999']
          },{
            person_id:1,
            person_name:'陈佳',
            person_img:'',
            person_pay:'9600/26天',
            person_skill:['一星育婴师','认识毒菌','会打DNF'],
            person_other:['湖南常德','45岁','服务24户','全服第一']
          },{
            person_id:2,
            person_name:'李丽华',
            person_img:'',
            person_pay:'7500/26天',
            person_skill:['二星保姆','睡眠少','精神好'],
            person_other:['湖南怀化','36岁','服务59户','任劳任怨']
          },{
            person_id:3,
            person_name:'马嫩瓜',
            person_img:'',
            person_pay:'10000/30天',
            person_skill:['T0育婴师','十五年经验','带娃无敌'],
            person_other:['湖南湘潭','50岁','服务5户','都夸我强']
          },
        ]
      };
    }
  }
</script>

<style lang="scss" scoped>
.att-psl{
    // height: 226rpx;
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 10rpx;
    .att-psl-item{
      margin: 32rpx;
      display: flex;
      
      .att-avt{
        height: 160rpx;
        width: 160rpx;
      }
      .info-box{
        flex: 1;
        margin-left: 22rpx;
        .pslbasic{
          display: flex;
          justify-content: space-between;
          font-size: 28rpx
        }
        .psl-skill{
          margin: 20rpx 0;
          .skill-txt{
            border: 1rpx solid #6f7bcc;
            border-radius: 2em;
            padding: 10rpx;
            margin-right: 20rpx;
            font-size: 20rpx;
            color: #6f7bcc;
          }
        }
        .psl-other{
          .other-txt{
            font-size: 24rpx;
            border-right: 1rpx solid #aaa;
            color: #aaa;
            margin-left: 10rpx;
            padding-right: 20rpx;
            &:first-child{
              margin-left: 0;
            }
            &:last-child{
              border-right: unset;
            }
          }
        }
      }
    }
}
</style>